<template>
  <div class="page">
    <div class="subject">
      <div class="chooceCards" v-if="chooceCardList.length>0">
        <button class="button-clear" v-for="(item,index) in chooceCardList" :key="index" :class="item.isActive?'active':''" :disabled="item.isDisabled" @click="chooceSubject(item,index)">
          <span class="icon icon-font" :class="'icon-km'+item.id"></span>
          <span>{{item.name}}</span>
          <span class="square"></span>
        </button>
      </div>
      <div class="schoolResult" v-if="chooceCardList.length>0">
        <div>
          <label>匹配</label>
          <label class="energized">{{subjectGroupBean.majorNum||0}}</label>
          <label>专业</label>
        </div>
        <div>
          <label>匹配</label>
          <label class="energized">{{subjectGroupBean.collegeNum||0}}</label>
          <label>院校</label></div>
      </div>
    </div>
    <div class='tab-bar' v-if="categoryList.length>0">
      <span class="active">匹配结果</span>
      <div class='triped'></div>
    </div>
    <div class="marjor-wrap" v-if="categoryList.length>0||majorData.length>0">
      <major-list class="major-list" ref="majorList" :categoryList="categoryList" :majorData="majorData" :pageTyp="'hide'" :fromPage="'by-subject'"></major-list>
    </div>
    <no-content v-else :text="text"></no-content>
  </div>
</template>

<script>
import { api } from '@/utils'
import majorList from '~/components/majorList'
export default {
  layout: 'xuanke',
  data () {
    return {
      chooceCardList: [],
      categoryList: [],
      majorData: [],
      resultCardList: [],
      subjectGroupBean: {},
      text: '暂无数据'
    }
  },
  components: {
    majorList
  },
  methods: {
    getData (params) {
      this.$axios.get(api.getSelectSubject, {
        params
      }).then(data => {
        if (data) {
          this.subjectGroupBean = data.subjectGroupBean
          this.majorData = data.majorCategorys
          this.lodash.map(data.majorCategorys, (item) => {
            this.categoryList.push({
              id: item.id,
              name: item.name
            })
          })
          this.text = ''
        }
      })
    },
    chooceSubject (obj, index) {
      if (!obj.isDisabled) {
        obj.isActive = !obj.isActive
        this.$set(this.chooceCardList, index, obj)
      }
      this.resultCardList = this.chooceCardList.filter(item => {
        return item.isActive === true
      })
      if (this.resultCardList.length >= 3) {
        this.chooceCardList.forEach(el => {
          if (!el.isActive) {
            el.isDisabled = true
          }
        })
        this.text = '正在加载数据...'
        this.$store.commit('SET_CHOOSE_SUBJECT', this.lodash.map(this.resultCardList, 'id').join(','))
        this.majorData = []
        this.categoryList = []
        let params = {
          subject1: this.resultCardList[0].id,
          subject2: this.resultCardList[1].id,
          subject3: this.resultCardList[2].id
        }
        this.getData(params)
      } else {
        this.text = '暂无数据'
        this.chooceCardList.forEach(el => {
          if (!el.isActive) {
            el.isDisabled = false
          }
        })
        this.majorData = []
        this.categoryList = []
        this.subjectGroupBean = {}
      }
    }
  },
  beforeMount () {
    this.$axios.get(api.querySubjectInfo).then(data => {
      this.chooceCardList = data
      this.chooceCardList.forEach(el => {
        el.isActive = false
        el.isDisabled = false
      })
      // 返回页面不刷新
      if (this.$store.state.chooceSubject !== '' && this.$store.state.chooceSubject && !this.$route.params.isFirst) {
        let list = this.$store.state.chooceSubject.split(',')
        let params = {
          subject1: list[0],
          subject2: list[1],
          subject3: list[2]
        }
        this.chooceCardList.forEach(item => {
          if (item.id === parseInt(list[0]) || item.id === parseInt(list[1]) || item.id === parseInt(list[2])) {
            this.$set(item, 'isActive', true)
          } else {
            this.$set(item, 'isDisabled', true)
          }
        })
        this.getData(params)
      }
    })
    /* let os = document.documentElement || document.body
    window.addEventListener('scroll', (e) => {
      if (os.scrollTop < 100) {
        if (this.$refs.majorList) {
          this.$refs.majorList.currentIndex = 0
        }
      }
    }) */
  }
}
</script>

<style scoped lang="scss">
.page {
  /deep/ .major > li > a:hover {
    color: $energized;
  }
  height: 100%;
  display: flex;
  flex-direction: column;
  .marjor-wrap {
    flex: 1;
    // overflow: hidden;
  }
}
.subject {
  display: flex;
  justify-content: space-between;
  margin-bottom: 45px;
}
.chooceCards {
  width: 370px;
  overflow: hidden;
  display: block;
  button {
    background: none;
    width: 105px;
    height: 50px;
    border: 1px solid $stable-d9 !important;
    cursor: pointer;
    position: relative;
    margin-bottom: 20px;
    &:not(:last-child) {
      margin-right: 15px;
    }
    .icon {
      margin-right: 10px;
    }
    .square {
      position: absolute;
      border: 1px solid $stable-d9;
      width: 15px;
      height: 15px;
      right: 0;
      top: 0;
    }
    &:disabled,
    &:disabled.square {
      border: 1px solid #f4f4f4 !important;
      transition: all ease-in-out 0.2s;
    }
  }
  .active {
    border: 1px solid $energized !important;
    transition: all ease-in-out 0.2s;
    .square::after {
      content: "";
      position: absolute;
      right: 4px;
      top: 1px;
      width: 2px;
      height: 10px;
      background-color: $energized;
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
    }
    .square::before {
      content: "";
      position: absolute;
      right: 9px;
      top: 5px;
      width: 2px;
      height: 5px;
      background-color: $energized;
      transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
    }
  }
}
.schoolResult {
  width: 360px;
  padding: 0 35px;
  border: 1px solid $stable-cb;
  font-size: 24px;
  > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .energized {
      font-size: 48px;
    }
    > label {
      display: inline-block;
    }
  }
}
.tab-bar {
  position: relative;
  span {
    color: $stable02;
    font-size: 24px;
    cursor: pointer;
    &:not(:last-child) {
      margin-right: 30px;
    }
  }
  span.active {
    color: $dark01;
    position: relative;
    font-weight: bold;
  }
  .triped {
    height: 6px;
    width: 32px;
    position: absolute;
    left: 0;
    background: $energized;
    transition: all ease 0.35s;
  }
}
</style>
